<template>
    <Popup class="tech-bind-phone-tip" v-model="showTip" :close-on-click-overlay="false" :overlay="true">
        <div class="bind-phone-tip-content">
            <div class="bind-phone-title">此手机号已加入会员计划</div>
            <div class="bind-phone-tip">继续绑定，此手机名下，相同会员计划的<br />会员卡将进行余额合并、保留最优折扣</div>
            <div class="btn-list">
                <Button class="tech-btn" type="default" @click="close">取消绑定</Button>
                <Button class="tech-btn" type="danger" @click="ensure">确认绑定</Button>
            </div>
        </div>
    </Popup>
</template>

<script>
import { Popup, Button } from 'vant';
export default {
    name: 'BindPhoneEnsureTip', // 绑定手机提示
    components: {
        Popup,
        Button,
    },
    data() {
        return {
            showTip: false,
        };
    },
    methods: {
        show() {
            this.showTip = true;
        },
        close() {
            this.showTip = false;
        },
        ensure() {
            // 确定绑定
            this.$emit('ensure');
            this.close();
        },
    },
};
</script>

<style lang="less" scoped>
.tech-bind-phone-tip {
    .flex-column-center();
    width: 100%;
    background-color: transparent;
    .bind-phone-tip-content {
        background-color: @white;
        width: 80%;
        .flex-column-center();
        .p(@gap-md);
        border-radius: @border-radius;
        .bind-phone-title {
            .font-size-md();
            color: @text-color;
            font-weight: @font-weight-bold;
            .m-v(@gap-md);
        }
        .bind-phone-tip {
            .font-size();
            color: @gray-darker;
            .m-b(@gap-lg + @gap);
        }
        .btn-list {
            .flex-row-center();
            width: 100%;
            .tech-btn {
                flex: 1;
                &:last-child {
                    .m-l(@gap-md);
                }
            }
        }
    }
}
</style>
